<template>
  <div class="wrapper">
    <common-scroll class="nearby-wrap"
                   ref="scroll"
                   :data="list"
                   @scrollend="handleScrollend"
                   :listenScroll="listenScroll"
                   v-show="list.length>0">
      <div class="container">
        <ul class="option-content-list">
          <li v-for="item of list"
              :key="item.id"
              class="option-content-item"
              @click="handleSkip(item.id)">
            <common-product :shopInfo="item"></common-product>
          </li>
          <li class="more"
              v-show="load">加载中...</li>
          <li class="more"
              v-show="finish">没有更多</li>
        </ul>
      </div>
    </common-scroll>
    <common-loading v-show="!list.length"></common-loading>
  </div>
</template>

<script>
import CommonProduct from 'common/product/Product'
import CommonLoading from 'common/loading/Loading'
import CommonScroll from 'common/scroll/Scroll'
export default {
  name: 'OptionHotel',
  components: {
    CommonProduct,
    CommonLoading,
    CommonScroll
  },
  data () {
    return {
      list: [],
      page: 1,
      scrollHeight: 0,
      load: false,
      more: '加载中...',
      finish: false
    }
  },
  methods: {
    getNearbyData (params) {
      const locationData = JSON.parse(this.$localStorage.get('locationData'))
      params = Object.assign({}, locationData, { tag_id: 4, page: this.page })
      if (locationData != null) {
        this.$api.nearby.getNearby({ ...params })
          .then(this.getNearbyDataSuccc)
          .catch((e) => { console.log(e) })
      }
    },
    getNearbyDataSuccc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.list = this.list.concat(...data)
        if (data.length === 0) {
          this.load = false
          this.finish = true
        }
      }
    },
    isLocation () {
      const LocationCity = this.$localStorage.get('LocationCity')
      const failLocation = '定位失败'
      if (LocationCity === failLocation || LocationCity == null) {
        return false
      } else {
        this.getNearbyData()
      }
    },
    handleScrollend (pos) {
      this.scrollHeight = -pos.y
    },
    handleSkip (id) {
      this.$router.push({
        path: `/detail/${id}`
      })
    }
  },
  watch: {
    scrollHeight (newY) {
      if (newY > 50 && !this.finish) {
        this.page++
        this.load = true
      }
    },
    page (page) {
      if (this.load && !this.finish) {
        setTimeout(() => {
          const locationData = JSON.parse(this.$localStorage.get('locationData'))
          const params = Object.assign({}, locationData, { tag_id: 4, page: page })
          this.getNearbyData(params)
          this.load = false
          this.$refs.scroll.finishPullUp()
          this.$refs.scroll.refresh()
        }, 200)
      }
    }
  },
  created () {
    this.isLocation()
    this.listenScroll = true
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'

.wrapper
  .nearby-wrap
    position absolute
    top 150px
    left 0
    right 0
    bottom 0
    overflow hidden
    touch-action none

.option-content-list
  padding()
  padding-bottom 110px
  min-height 400px
  box-sizing border-box

  .option-content-item
    padding-top 30px
    box-sizing border-box

  .more
    width 100%
    height 50px
    line-height 50px
    text-align center
    font-size $fzFourthly
    color $graySecond
</style>
